<script setup lang="ts">
import { ref, computed,watch,onMounted,toRaw } from "vue";
import { useColumns } from "./columns";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
const search_field = ref('30day');
const last30Days = new Date(new Date());
last30Days.setDate(new Date().getDate() - 29);
const time = ref([formatDate(last30Days),formatDate(new Date())]);
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
import Empty from "./empty.svg?component";
const dataList = ref([]);
const loading = ref(true);
import {welcomeGoodsRank} from "@/api/statistics";
const selectType =function (v){
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1);

  const last7Days = new Date(today);
  last7Days.setDate(today.getDate() - 6);

  const last30Days = new Date(today);
  last30Days.setDate(today.getDate() - 29);

  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

  const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
  const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);

  if(v=='today'){
    time.value = [formatDate(today),formatDate(today)]
  }else if(v=='yesterday'){
    time.value = [formatDate(yesterday),formatDate(yesterday)]
  }else if(v=='7day'){
    time.value = [formatDate(last7Days),formatDate(today)]
  }else if(v=='30day'){
    time.value = [formatDate(last30Days),formatDate(today)]
  }else if(v=='month'){
    time.value = [formatDate(firstDayOfMonth),formatDate(lastDayOfMonth)]
  }else if(v=='lastmonth'){
    time.value = [formatDate(firstDayOfLastMonth),formatDate(lastDayOfLastMonth)]
  }else{
    time.value = []
  }
  getData();
}
async function getData(){
  loading.value = true;
  const { data } = await welcomeGoodsRank(toRaw({time:time.value}))
  dataList.value = data
  loading.value = false;
}
onMounted(() => {
  getData();
});


</script>

<template>
  <div class="flex justify-between">
    <span class="text-md font-medium">商品销售排行</span>
    <div>
      <el-form-item style="margin-bottom:5px;">
        <el-select v-model="search_field" placeholder="选择时间" class="search_field" @change="selectType" style="width: 104px;border-radius:0">
          <el-option label="今天" value="today" />
          <el-option label="昨天" value="yesterday" />
          <el-option label="最近七天" value="7day" />
          <el-option label="最近30天" value="30day" />
          <el-option label="本月" value="month" />
          <el-option label="上月" value="lastmonth" />
          <el-option label="自定义" value="diy" />
        </el-select>
        <el-date-picker
          v-model="time" value-format="YYYY-MM-DD" format="YYYY-MM-DD" @change="getData"
          type="daterange" style="width: 210px;border-radius: 0px;border-left: 0;margin-left: -1px;"
          range-separator="~" prefix-icon=""
          start-placeholder="Start date"
          end-placeholder="End date"
        >
        </el-date-picker>
      </el-form-item>
    </div>
  </div>


  <el-table alignWhole="center" showOverflowTooltip :loading="loading" max-height="500" :loading-config="{ background: 'transparent' }" :data="dataList">
    <template #empty>
      <el-empty description="暂无数据" :image-size="60">
        <template #image>
          <Empty />
        </template>
      </el-empty>
    </template>
    <el-table-column label="" width="30">
      <template #default="{ $index }">
        {{ $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="title" label="商品信息" >
      <template #default="scope">
        <el-row :gutter="20">
          <el-col :span="6"><el-image style="width: 40px; height:40px" :src="scope.row?.pictureUrl" :preview-src-list="[scope.row?.pictureUrl]" :preview-teleported="true" /></el-col>
          <el-col :span="18">
            <div><el-text size="small" type="primary">{{scope.row?.stockSku}}</el-text><el-text size="small">x{{scope.row?.quantity}}{{scope.row?.productUnit}}</el-text></div>
            <div><el-text size="small" truncated line-clamp="2">{{scope.row.title}}</el-text></div>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column prop="total_quantity" label="销售数量" width="80" />

  </el-table>
</template>

<style lang="scss">
.pure-table-filter {
  .el-table-filter__list {
    min-width: 80px;
    padding: 0;

    li {
      line-height: 28px;
    }
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-table) {
  --el-table-border: none;
  --el-table-border-color: transparent;

  .el-empty__description {
    margin: 0;
  }

  .el-scrollbar__bar {
    display: none;
  }
}
</style>
